<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页-个人博客</title>
    <meta name="keywords" content="个人博客,杨青个人博客,个人博客模板,杨青" />
    <meta name="description" content="杨青个人博客，是一个站在web前端设计之路的女程序员个人网站，提供个人博客模板免费资源下载的个人原创网站。" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link th:href="@{static/css/base.css}" rel="stylesheet">
    <link th:href="@{static/css/index.css}" rel="stylesheet">
    <link th:href="@{static/css/m.css}" rel="stylesheet">
    <link th:href="@{static/layui/dist/css/layui.css}" rel="stylesheet"  media="all">

    <!--[if lt IE 9]>
    <script th:src="@{static/js/modernizr.js}"></script>
    <![endif]-->
    <script>
        window.onload = function ()
        {
            var oH2 = document.getElementsByTagName("h2")[0];
            var oUl = document.getElementsByTagName("ul")[0];
            oH2.onclick = function ()
            {
                var style = oUl.style;
                style.display = style.display == "block" ? "none" : "block";
                oH2.className = style.display == "block" ? "open" : ""
            }
        }
    </script>
</head>
<body>
<header>
    <div class="tophead">
        <div class="logo"><a href="/">个人博客</a></div>
        <div id="mnav">
            <h2><span class="navicon"></span></h2>
            <ul class="layui-nav layui-bg-green" lay-filter="">
                <li class="layui-nav-item">
                <li class="layui-nav-item"><a href="">网站首页</a></li>
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;">博客分类</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">选项1</a></dd>
                        <dd><a href="">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                    </dl>
                </li>
                <li><a href="share.html">模板分享</a></li>
                <li><a href="list.html">学无止境</a></li>
                <li><a href="info.html">慢生活</a></li>
                <li><a href="gbook.html">留言</a></li>
            </ul>
        </div>
        <nav class="topnav" id="topnav">
            <ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="about.html">博客分类</a></li>
                <li><a href="share.html">模板分享</a></li>
                <li><a href="list.html">学无止境</a></li>
                <li><a href="info.html">慢生活</a></li>
                <li><a href="gbook.html">留言</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="picshow">
    <ul>

        <li th:each="banner,bannerStat:${bannerList}">
            <a th:href="${banner.link}">
                <i><img th:src="@{'/html/file/download/'+${banner.img}}" width="100%" height="100%"></i>
                <div class="font">
                    <h3 th:text="${banner.title}"></h3>
                </div>
            </a>
    </ul>
</div>
<article>
    <div class="blogs">
        <li th:each="article:${articleList}"> <span class="blogpic"></span>
            <div class="bloginfo">
                <h3 th:text="${article.title}"></h3>
            </div>
        </li>

        <li> <span class="blogpic"><a href="/"><img src="images/text01.jpg"></a></span>
            <h3 class="blogtitle"><a href="/">网页中图片属性固定宽度，如何用js改变大小</a></h3>
            <div class="bloginfo">
                <p>用最简单的代码，实现瀑布流布局，没有繁琐的css，没有jq，只需要做到以下就可以实现瀑布流的效果。思路很简单，看成是三列布局，分别用三个ul来调用。帝国cms列表模板，...</p>
            </div>
            <div class="autor"><span class="lm"><a href="/" title="CSS3|Html5" target="_blank" class="classname">CSS3|Html5</a></span><span class="dtime">2018-05-04</span><span class="viewnum">浏览（<a href="/">0</a>）</span><span class="readmore"><a href="/">阅读原文</a></span></div>
        </li>
    </div>
    <div class="sidebar">
        <div class="search">
            <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
                <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字'}" type="text">
                <input name="show" value="title" type="hidden">
                <input name="tempid" value="1" type="hidden">
                <input name="tbname" value="news" type="hidden">
                <input name="Submit" class="input_submit" value="搜索" type="submit">
            </form>
        </div>
        <div class="cloud">
            <h2 class="hometitle">标签云</h2>
            <ul>
                <a href="/" th:each="label,labelStat:${labels}" th:text="${label.lableName}"></a>
            </ul>
        </div>
        <div class="paihang">
            <h2 class="hometitle">点击排行</h2>

        </div>
        <div class="paihang">
            <h2 class="hometitle">站长推荐</h2>

        </div>
        <div class="links">
            <h2 class="hometitle">友情链接</h2>
            <ul>

            </ul>
        </div>
        <div class="weixin">
            <h2 class="hometitle">官方微信</h2>
            <ul>
                <img src="images/wx.jpg">
            </ul>
        </div>
    </div>
</article>
<div class="blank"></div>
<footer>
    <p>Design by <a href="/">杨青个人博客</a> <a href="/">蜀ICP备11002373号-1</a></p>
</footer>
<script th:src="@{static/js/nav.js}"></script>
</body>
</html>
